<template>
  <div class="APPcontainer">
    <div class="screenEL" ref="screenEL">
      <topFixedBar></topFixedBar>
      <Topinfo></Topinfo>
      <commonBox>
        <template #titile>
          填写内容
        </template>
        <template #content>
          <div class="content">
            <el-form ref="ruleFormRef_01" :model="ruleForm_01" :rules="rules_01">
              <el-form-item label="区服:" @input.capture="check_boxFun">
                <el-form inline label-width=100>
                  <el-form-item label="IOS服">
                    <mkForm type="checkbox" data-group v-model="ruleForm_01.IOSSever"></mkForm>
                  </el-form-item>
                  <el-form-item label="Bili服">
                    <mkForm type="checkbox" data-group v-model="ruleForm_01.BiliSever"></mkForm>
                  </el-form-item>
                </el-form>
                <el-form inline label-width=100>
                  <el-form-item label="Bili享游">
                    <mkForm type="checkbox" data-group v-model="ruleForm_01.Bili_XSever"></mkForm>
                  </el-form-item>
                  <el-form-item label="渠道服">
                    <mkForm type="checkbox" data-group v-model="ruleForm_01.otherSever"></mkForm>
                  </el-form-item>
                </el-form>
              </el-form-item>
              <el-form-item label="游戏数字ID(不含逗号):" prop="userID">
                <el-input v-model="ruleForm_01.userID" />

                <!-- <mkForm width="22.5rem" v-model="ruleForm_01.userID"></mkForm> -->
              </el-form-item>
              <el-form-item label="希望被称呼的名称:" prop="userNickName">
                <!-- <mkForm width="25.675rem" v-model="ruleForm_01.userNickName"></mkForm> -->
                <el-input v-model="ruleForm_01.userNickName" />
              </el-form-item>
              <el-form-item label="出生日期:" prop="userBrithMonth">
                <!-- <mkForm type="text" width="14rem" v-model="ruleForm_01.userBrithMonth"></mkForm> -->
                <el-input class='short' v-model="ruleForm_01.userBrithMonth" />
                <el-form-item label="月" prop="userBrithDay">
                  <el-input class='short' v-model="ruleForm_01.userBrithDay" />
                </el-form-item>
                <el-form-item label="日">
                </el-form-item>
                <!-- &nbsp;月&nbsp; -->
                <!-- <mkForm type="text" width="14rem" v-model="ruleForm_01.userBrithDay"></mkForm> -->
                <!-- &nbsp;日 -->
              </el-form-item>
              <el-form-item class="lotteryBtn">
                <!-- <el-checkbox v-model="ruleForm_01.isLottery" label="您是否希望参与实体礼物抽奖活动" size="large" /> -->
                <mkForm type="checkbox" v-model="ruleForm_01.isLottery"></mkForm>
                <span>您是否希望参与实体礼物抽奖活动</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="dashedLine"></div>
        </template>
        <template #footer>
          <el-form>
            <el-form-item label="联系人姓名:">
              <mkForm type="text" width="30.7875rem" v-model="userName"></mkForm>
            </el-form-item>
            <el-form-item label="收件地址:">
              <mkForm type="text" width="32.5rem" v-model="userAddress"></mkForm>
            </el-form-item>
            <el-form-item label="联系人电话:">
              <mkForm type="text" width="30.7875rem" v-model="userTel"></mkForm>
            </el-form-item>
          </el-form>
          <button class="config update" ref="form_submit_btnEL" @click="toggleClassList"></button>
        </template>
      </commonBox>

      <div style="height: .325rem;"></div>

      <commonBox height="32rem">
        <template #titile>
          活动规则详情
        </template>
        <template #content>
          <div class="textcontent">
            <div>
              收集活动截止后，我们将按照时间顺序，依次为2024年6月1日~2025年5月31日过生日的御主送上生日祝福。
              必填项中的部分信息将会出现在生日祝福中，填写活动截止后无法修改，截止填写前您可以在当前页面确认所填信息是否准确。
            </div>
            <div>
              ※填写信息中请勿包含违反公序良俗的内容，官方可能会强制修改相关内容，避免违规内容展示；
            </div>
            <div>
              此外，在2024年5月13日 00:00~2024年5月27日11:59期间登录游戏，并在本页面内选择参与抽奖活动，既有机会获得【实体版生日礼物】！
              我们将从符合上述条件的御主中，抽选150名送出实体版礼物。
            </div>
            <div>
              抽选结果将在官方B站账号进行公示，并通过B站私信通知，还请关注后续官方通知。
            </div>
          </div>
        </template>
      </commonBox>


      <div class="last">
        <div class="isAdd"></div>
      </div>
      <div style="height: 4.1875rem;"></div>
    </div>
  </div>


</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import topFixedBar from './views/topFixedBar/topFixedBar.vue';
import commonBox from './views/commonBox/commonBox.vue';
import mkForm from '@/components/mk-form.vue'
import Topinfo from '@/components/topInfo/topInfo.vue'


const screenEL = ref()
function felxible(htmlfontSize = 16) {
  const htmlEL = document.documentElement
  if (htmlEL.clientWidth >= 450) {
    // console.log('浏览器大屏', screenEL.value.clientWidth);
    // htmlEL.style.fontSize = screenEL.value.clientWidth / 750 * htmlfontSize + 'px'
    htmlEL.style.fontSize = 500 / 750 * htmlfontSize + 'px'
  } else if (htmlEL.clientWidth <= 449) {
    // console.log('手机小屏', htmlEL.clientWidth);
    htmlEL.style.fontSize = htmlEL.clientWidth / 750 * htmlfontSize + 'px'
  }
}
onMounted(() => felxible())
window.addEventListener('resize', () => felxible())

const ruleForm_01 = reactive({
  IOSSever: false,
  BiliSever: false,
  Bili_XSever: false,
  otherSever: false,

  userID: '',
  userNickName: '',
  userBrithMonth: '',
  userBrithDay: '',

  isLottery: false,

})
const userName = ref('')
const userAddress = ref('')
const userTel = ref('')


const validateMonth = (rule: any, value: any, callback: any) => {
  if (value > 12 || value < 0) {
    callback(new Error('请输入正确的月份'))
  } else {
    callback()
  }
}
const validateDay = (rule: any, value: any, callback: any) => {
  if (value > 31 || value < 0) {
    callback(new Error('请输入正确的日期'))
  } else if (ruleForm_01.userBrithMonth == '2' && value > 29) {
    callback(new Error('请输入正确的日期'))
  } else {
    callback()
  }
}
const rules_01 = {
  userID: [
    { required: true, message: '不能为空', trigger: 'blur' },
    { min: 12, message: '最少包含12位数字', trigger: 'blur' },
  ],
  userNickName: [
    { min: 3, max: 6, message: '名称应为3~6位字符', trigger: 'blur' },
  ],
  userBrithMonth: [
    { validator: validateMonth, trigger: 'blur' },
    { min: 1, max: 2, message: '请输入正确的月份', trigger: 'blur' },
  ],
  userBrithDay: [
    { validator: validateDay, trigger: 'blur' },
    { min: 1, max: 2, message: '请输入正确的日期', trigger: 'blur' },
  ]
}


const check_boxFun = (e: any) => {
  ruleForm_01.BiliSever = false
  ruleForm_01.otherSever = false
  ruleForm_01.IOSSever = false
  ruleForm_01.Bili_XSever = false
}


const ruleFormRef_01 = ref()
const form_submit_btnEL = ref()
const toggleClassList = () => {
  Object.assign(ruleForm_01, { userName, userAddress, userTel })
  if (!ruleFormRef_01.value) return
  ruleFormRef_01.value.validate((valid: any) => {
    if (valid) {
      alert(`提交成功！~${JSON.stringify(ruleForm_01)}`)
      form_submit_btnEL.value.classList.toggle('update')
    } else {
      console.log('error submit!')
      alert('提交失败。')
    }
  })
}
</script>


<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: 1.6525rem;
  font-weight: 600;
  font-family: 'STHeiTi Light', 'Microsoft YaHei', serif;
  color: black;
}

.APPcontainer {
  height: 100vh;
  width: 100vw;
  background: url(./assets/dadasd.jpg) no-repeat;
  background-size: cover;
  overflow: auto;

  .screenEL {
    margin: 0 auto;
    width: 46.875rem;
    background: url(./assets/bg11.jpg) no-repeat;
    background-size: cover;
  }
}


.content {
  margin-top: 1.25rem;

  .el-input {
    font-size: 2rem;
    border-bottom: .0625rem solid black;

    :deep(.el-input__wrapper) {
      box-shadow: none;
    }

  }

  .el-input.short {
    --el-input-width: 13rem;
  }


  .config {
    height: 4.5rem;
    width: 9.5rem;
    background: url(./assets/btn11.png) no-repeat;
    background-size: contain;
    margin-left: 16.3rem;
    margin-bottom: 2.5rem;
    font-family: 'STzhongsong', 'Microsoft YaHei', serif;
    color: #edf3ff;
    font-size: 1.75rem;
  }

  .update {
    background: url(./assets/dasdadad.avif) no-repeat;
    background-size: contain;
  }

}


// 'STHeiTi Light'  华文细黑
// 'STzhongsong'  华文中宋
:deep(.el-form-item__content) {
  justify-content: center;

  span {
    font-family: 'STzhongsong', 'Microsoft YaHei', serif;
    font-size: 1.1875rem;
    font-weight: 500;
    margin-left: .8125rem;
    letter-spacing: .1em;
  }
}

.dashedLine {
  display: inline-block;
  height: 1.25rem;
  width: 100%;
  border-bottom: .125rem dashed gray;
  margin-bottom: 3.125rem;
}

.textcontent {
  height: 17.3rem;
  font-size: 1.325rem;
  font-weight: 600;
  // font-family: 'Microsoft YaHei', serif;
  overflow: auto;

  >div {
    text-indent: 2em;
    margin: .625rem;
  }
}

.last {
  height: 39.75rem;
  margin-top: 1.75rem;
  background: url(./assets/0ae7262bfffc8b1f9476b3689aee2987fa6122fb.png) no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;

  .isAdd {
    height: 5.4375rem;
    width: 10.4625rem;
    position: absolute;
    top: 11rem;
    left: 11.9625rem;
    background: url(./assets/9d72f7a40a8700fdeb055e612d3d9f8146affe14.png) no-repeat;
    background-size: contain;
  }

}
</style>
